import { useRef, useState } from 'react';
import { ModalForm, ProFormSelect, ProTable } from '@ant-design/pro-components';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import type { BatchTaskDetailTableItem } from '../data.d';
import { TaskStatus, TaskType } from '../data.d';
import { queryBatchTaskDetails } from '../service';
import moment from 'moment';

interface ModalProps {
  id: string;
  taskType: TaskType;
}

export default (props: ModalProps) => {
  const { id, taskType } = props;
  const actionRef = useRef<ActionType>();
  const [status, setStatus] = useState<TaskStatus>();
  const createParkingspotColumns: ProColumns<BatchTaskDetailTableItem>[] = [
    {
      title: '结果',
      align: 'center',
      dataIndex: 'status',
      hideInForm: true,
      hideInSearch: true,
      width: 80,
      valueEnum: {
        [TaskStatus.FAIL]: { text: '失败', status: 'Error' },
        [TaskStatus.ERROR]: { text: '错误', status: 'Error' },
        [TaskStatus.SUCCESS]: { text: '成功', status: 'Success' },
      },
    },
    {
      title: '路段名称',
      width: 120,
      dataIndex: 'param',
      hideInForm: true,
      hideInSearch: true,
      renderText: (val: string) => JSON.parse(val).parkingLotName,
    },
    {
      title: '泊位编号',
      width: 100,
      align: 'center',
      dataIndex: 'param',
      hideInForm: true,
      hideInSearch: true,
      renderText: (val: string) => JSON.parse(val).parkingSpotId,
    },
    {
      title: '地磁编号',
      width: 100,
      dataIndex: 'param',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      renderText: (val: string) => JSON.parse(val).sensorSn,
    },
    {
      title: '错误信息',
      width: 220,
      dataIndex: 'errorMsg',
      hideInForm: true,
      hideInSearch: true,
    },
  ];
  const createParkinglotColumns: ProColumns<BatchTaskDetailTableItem>[] = [
    {
      title: '结果',
      align: 'center',
      dataIndex: 'status',
      width: 80,
      hideInForm: true,
      hideInSearch: true,
      valueEnum: {
        [TaskStatus.FAIL]: { text: '失败', status: 'Error' },
        [TaskStatus.SUCCESS]: { text: '成功', status: 'Success' },
      },
    },
    {
      title: '路段名称',
      width: 120,
      dataIndex: 'param',
      hideInForm: true,
      hideInSearch: true,
      renderText: (val: string) => JSON.parse(val).parkingLotName,
    },
    {
      title: '行政区域',
      width: 150,
      dataIndex: 'param',
      hideInForm: true,
      hideInSearch: true,
      renderText: (val: string) => JSON.parse(val).province,
    },
    {
      title: '详细位置',
      width: 120,
      dataIndex: 'param',
      hideInForm: true,
      hideInSearch: true,
      renderText: (val: string) =>
        JSON.parse(val).address === 'undefined' ? '' : JSON.parse(val).address,
    },
    {
      title: '错误信息',
      width: 200,
      dataIndex: 'errorMsg',
      hideInForm: true,
      hideInSearch: true,
    },
  ];
  const bindSensorColumns: ProColumns<BatchTaskDetailTableItem>[] = [
    {
      title: '结果',
      align: 'center',
      width: 80,
      dataIndex: 'status',
      hideInForm: true,
      hideInSearch: true,
      valueEnum: {
        [TaskStatus.FAIL]: { text: '失败', status: 'Error' },
        [TaskStatus.ERROR]: { text: '错误', status: 'Error' },
        [TaskStatus.SUCCESS]: { text: '成功', status: 'Success' },
      },
    },
    {
      title: '路段名称',
      width: 120,
      dataIndex: 'parkingLotName',
      ellipsis: true,
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => JSON.parse(record.param).parkingLotName,
    },
    {
      title: '泊位编号',
      width: 80,
      align: 'center',
      dataIndex: 'parkingSpotId',
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => JSON.parse(record.param).parkingSpotId,
    },
    {
      title: '地磁编号',
      width: 80,
      align: 'center',
      dataIndex: 'sensorSn',
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => JSON.parse(record.param).sensorSn,
    },
    {
      title: '是否覆盖原有地磁',
      align: 'center',
      dataIndex: 'overwrite',
      width: 100,
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => (JSON.parse(record.param).overwrite ? '是' : '否'),
    },
    {
      title: '错误信息',
      width: 200,
      dataIndex: 'errorMsg',
      hideInForm: true,
      hideInSearch: true,
    },
  ];
  const createPatrolColumns: ProColumns<BatchTaskDetailTableItem>[] = [
    {
      title: '结果',
      align: 'center',
      width: 80,
      dataIndex: 'status',
      hideInForm: true,
      hideInSearch: true,
      valueEnum: {
        [TaskStatus.FAIL]: { text: '失败', status: 'Error' },
        [TaskStatus.ERROR]: { text: '错误', status: 'Error' },
        [TaskStatus.SUCCESS]: { text: '成功', status: 'Success' },
      },
    },
    {
      title: '巡检设备编号',
      width: 120,
      dataIndex: 'deviceSn',
      align: 'center',
      ellipsis: true,
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => JSON.parse(record.param)?.deviceSn,
    },
    {
      title: '巡检设备厂家',
      width: 120,
      align: 'center',
      dataIndex: 'manufacturer',
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => JSON.parse(record.param)?.manufacturer,
    },
    {
      title: '巡检设备型号',
      width: 120,
      align: 'center',
      dataIndex: 'deviceModel',
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => JSON.parse(record.param)?.deviceModel,
    },
    {
      title: '流量卡号',
      align: 'center',
      dataIndex: 'iccid',
      width: 180,
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => JSON.parse(record.param)?.iccid,
    },
    {
      title: '流量卡过期时间',
      align: 'center',
      dataIndex: 'iccidExpiredTime',
      width: 140,
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => {
        const temp = JSON.parse(record.param)?.iccidExpiredTime;
        return temp ? moment(temp).format('YYYY-MM-DD') : '';
      },
    },
    {
      title: '错误信息',
      width: 200,
      dataIndex: 'errorMsg',
      hideInForm: true,
      hideInSearch: true,
    },
  ];
  const createSensorColumns: ProColumns<BatchTaskDetailTableItem>[] = [
    {
      title: '结果',
      align: 'center',
      width: 80,
      dataIndex: 'status',
      hideInForm: true,
      hideInSearch: true,
      valueEnum: {
        [TaskStatus.FAIL]: { text: '失败', status: 'Error' },
        [TaskStatus.ERROR]: { text: '错误', status: 'Error' },
        [TaskStatus.SUCCESS]: { text: '成功', status: 'Success' },
      },
    },
    {
      title: '地磁编号',
      width: 80,
      align: 'center',
      dataIndex: 'deviceSn',
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => JSON.parse(record.param)?.deviceSn,
    },
    {
      title: '地磁设备厂家',
      align: 'center',
      dataIndex: 'manufacturer',
      width: 100,
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => JSON.parse(record.param)?.manufacturer || '',
    },
    {
      title: '错误信息',
      width: 200,
      dataIndex: 'errorMsg',
      hideInForm: true,
      hideInSearch: true,
    },
  ];
  const importOrderColumns: ProColumns<BatchTaskDetailTableItem>[] = [
    {
      title: '结果',
      align: 'center',
      dataIndex: 'status',
      hideInForm: true,
      hideInSearch: true,
      width: 80,
      valueEnum: {
        [TaskStatus.FAIL]: { text: '失败', status: 'Error' },
        [TaskStatus.ERROR]: { text: '错误', status: 'Error' },
        [TaskStatus.SUCCESS]: { text: '成功', status: 'Success' },
      },
    },
    {
      title: '路段名称',
      width: 120,
      dataIndex: 'parkingLotName',
      ellipsis: true,
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) =>
        record.result ? JSON.parse(record.result).parkingLotName : '暂无数据',
    },
    {
      title: '泊位编号',
      width: 80,
      align: 'center',
      dataIndex: 'spotId',
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => JSON.parse(record.param).spotId,
    },
    {
      title: '订单编号',
      width: 120,
      align: 'center',
      dataIndex: 'orderNo',
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => (record.result ? JSON.parse(record.result).orderNo : '暂无数据'),
    },
    {
      title: '车牌号码',
      width: 80,
      align: 'center',
      dataIndex: 'plateNumber',
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => JSON.parse(record.param).plateNumber,
    },
    {
      title: '错误信息',
      width: 220,
      dataIndex: 'errorMsg',
      hideInForm: true,
      hideInSearch: true,
    },
  ];
  const outCarColumns: ProColumns<BatchTaskDetailTableItem>[] = [
    {
      title: '结果',
      align: 'center',
      dataIndex: 'status',
      hideInForm: true,
      hideInSearch: true,
      width: 80,
      valueEnum: {
        [TaskStatus.FAIL]: { text: '失败', status: 'Error' },
        [TaskStatus.ERROR]: { text: '错误', status: 'Error' },
        [TaskStatus.SUCCESS]: { text: '成功', status: 'Success' },
      },
    },
    {
      title: '路段名称',
      width: 120,
      dataIndex: 'param',
      hideInForm: true,
      hideInSearch: true,
      renderText: (val: string) => JSON.parse(val).parkingLotName,
    },
    {
      title: '泊位编号',
      width: 100,
      align: 'center',
      dataIndex: 'param',
      hideInForm: true,
      hideInSearch: true,
      renderText: (val: string) => JSON.parse(val).spotId,
    },
    {
      title: '车牌号码',
      width: 100,
      align: 'center',
      dataIndex: 'param',
      hideInForm: true,
      hideInSearch: true,
      renderText: (val: string) => JSON.parse(val).plateNumber,
    },
    {
      title: '订单编号',
      width: 100,
      dataIndex: 'param',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      renderText: (val: string) => JSON.parse(val).orderNo,
    },
    {
      title: '驶入时间',
      width: 120,
      dataIndex: 'param',
      align: 'center',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
      renderText: (val: string) => JSON.parse(val).inTime,
    },
    {
      title: '错误信息',
      width: 220,
      dataIndex: 'errorMsg',
      hideInForm: true,
      hideInSearch: true,
    },
  ];
  const showCols = () => {
    if (taskType === TaskType.BIND_SENSOR) {
      return bindSensorColumns;
    }
    if (taskType === TaskType.CREATE_PKLOT) {
      return createParkinglotColumns;
    }
    if (taskType === TaskType.CREATE_PKSPOT) {
      return createParkingspotColumns;
    }
    if (taskType === TaskType.CREATE_PATROL) {
      return createPatrolColumns;
    }
    if (taskType === TaskType.CREATE_SENSOR) {
      return createSensorColumns;
    }
    if (taskType === TaskType.IMPORT_ORDER) {
      return importOrderColumns;
    }
    if (taskType === TaskType.OUT_CAR) {
      return outCarColumns;
    }
    return createParkingspotColumns;
  };
  return (
    <ModalForm
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          setStatus(undefined);
          actionRef.current?.reload();
        },
      }}
      layout="horizontal"
      width="75vw"
      submitter={false}
      trigger={<a>任务详情</a>}
    >
      <ProTable<BatchTaskDetailTableItem>
        columns={showCols()}
        rowKey="_id"
        scroll={{ x: true }}
        search={false}
        actionRef={actionRef}
        columnEmptyText="暂无数据"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        style={{ whiteSpace: 'nowrap' }}
        headerTitle={
          <div>
            <ProFormSelect
              width="sm"
              label="选择状态"
              options={[
                { label: '成功', value: TaskStatus.SUCCESS },
                { label: '失败', value: TaskStatus.FAIL },
                { label: '错误', value: TaskStatus.ERROR },
              ]}
              allowClear
              fieldProps={{
                onChange: (val: TaskStatus) => {
                  setStatus(val);
                  actionRef.current?.reload();
                },
                onClear: () => {
                  setStatus(undefined);
                  actionRef.current?.reload();
                },
              }}
            />
          </div>
        }
        debounceTime={300}
        request={async (params, sort) =>
          queryBatchTaskDetails({ ...params, status, taskId: id }, sort)
        }
      />
    </ModalForm>
  );
};
